<template>
	<view class="container">
	  	<uni-card padding="0" spacing="0">
	  		<template v-slot:cover>
	  			<view class="custom-cover">
	  				<image  class="cover-image" mode="aspectFill" src="https://img.springautumncome.asia/zmd/psc%20%282%29.jpg" >
	  				</image>
	  				<view class="cover-content">
	  					<view class="info" v-if="userinfo">
	  					   <image   :src="baseUrl+userinfo.avatar" class="avatar" @click="selectImg"></image>
	  					   <text  class="uni-subtitle uni-white">{{userinfo.nickName}}</text>
	  					</view>
	  					<view class="logout" v-else>
							<text   class="uni-subtitle uni-white">登录</text>
	  					</view>
	  				</view>
	  			</view>
	  		</template>
	  		<!-- <uni-list> -->
	  			<!-- <uni-list-item title="我的消息" showArrow clickable="true"  @click="clickBtn(2)">></uni-list-item> -->
	  		<!-- </uni-list> -->
	  		<view slot="actions" class="card-actions no-border">
	  			<view class="card-actions-item" @click="actionsClick('关注店铺')">
	  				<uni-icons type="pengyouquan" size="18" color="#999"></uni-icons>
	  				<text class="card-actions-item-text">关注店铺</text>
	  			</view>
	  			<view class="card-actions-item" @click="actionsClick('点赞')" v-if="false">
	  				<uni-icons type="heart" size="18" color="#999"></uni-icons>
	  				<text class="card-actions-item-text">点赞</text>
	  			</view>
	  			<view class="card-actions-item" @click="actionsClick('评论')" v-if="false">
	  				<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
	  				<text class="card-actions-item-text">评论</text>
	  			</view>
	  		</view>
			<loginDialog></loginDialog>
	  	</uni-card>
	</view>
</template>

<script lang="ts" setup>
import { onMounted, ref,watchEffect } from 'vue'
import {baseUrl} from '@/api/request.ts';
import { login ,userInfo,logout,edit,loginWx} from '@/api/app-user.ts';
import { onLaunch, onLoad, onShow } from '@dcloudio/uni-app';
import loginDialog from '@/pages/personcenter/login.vue'
	const selectImg=()=>{
		uni.chooseImage({
			success: (chooseImageRes) => {
				const tempFilePaths = chooseImageRes.tempFilePaths;
				uni.uploadFile({
					url: baseUrl+'/app/common/upload', //仅为示例，非真实的接口地址
					filePath: tempFilePaths[0],
					name: 'file',
					success: (uploadFileRes) => {
						const urlimg=JSON.parse(uploadFileRes.data).data
						edit({'avatar':urlimg})
					}
				});
			}
		});
	}
	const userinfo=ref({
		avatar :'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
					  nickName:'',wxCode:'',phone:'',phoneCode:''
	})
	onShow(()=>{
		if(!uni.getStorageSync('token')){
			console.log("token2222",uni.getStorageSync('token'))
			uni.setStorageSync('login',true)
		}else if(uni.getStorageSync('user')){
			userinfo.value=uni.getStorageSync('user')
		}else{
			getUser()
		}
	})
	watchEffect(()=>{
		if(!uni.getStorageSync('token')){
			console.log("token2222",uni.getStorageSync('token'))
			uni.setStorageSync('login',true)
		}else if(uni.getStorageSync('user')){
			userinfo.value=uni.getStorageSync('user')
		}else{
			getUser()
		}
	})
	const getUser=()=>{
		userInfo(null).then(res2=>{
			userinfo.value=res2.data
		})
	}
	const actionsClick=(text)=>{
		uni.showToast({
			title:text,
			icon:'none'
		})
		if(text=='关注店铺'){
			uni.navigateTo({
				url:'/pages/my/careshop/index'
			})
		}
	}
	const clickBtn=(type)=>{
		let url= ''
		if(type == 0){
			url="/pages/my/photo/index"
		}else if(type == 1){
			url="/pages/my/photocircle/index"
		}else if(type == 2){
			url="/pages/message/index"
		}
		uni.navigateTo({
			url:url
		})
	}
</script>

<style lang="scss">
	
	.popup-content {
		padding: 20px;
		height: auto;
		width: 80%;
		text-align: center;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		flex-direction: column;
	}
	.popup-content view{
		margin-bottom: 5px;
		width:100%;
	}
	.input{
		margin-bottom: 2%;
	}
	.logout{
		width: 50%;
		text-align: center;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		padding-right: 6%;
	}
	.info{
		width: 50%;
		display: flex;
		align-items: center;
		height: 100%;
	}
	.container {
			overflow: hidden;
	}

	.custom-cover {
		flex: 1;
		flex-direction: row;
		position: relative;
	}

	.cover-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 40px;
		background-color: rgba($color: #000000, $alpha: 0.4);
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 15px;
		font-size: 14px;
		color: #fff;
	}

	.card-actions {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		height: 45px;
		border-top: 1px #eee solid;
	}
	.card-actions-item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.card-actions-item-text {
		font-size: 12px;
		color: #666;
		margin-left: 5px;
	}
	.cover-image {
		flex: 1;
		height: 150px;
		width: 100%;
	}
	.no-border {
		border-width: 0;
	}
	.avatar{
		width: 25px;
		border-radius: 50%;
		height: 25px;
		margin-right: 8px;
	}

</style>